<template>
	<div>
		<head-top></head-top>
		<div class="col-sm-12 boxWrap">
			<div class="personal">
				<div class="col-sm-12">					
					<div class="col-sm-4 per_lable_title">
						<p class="col-sm-6" @click="changeTab(1)">个人信息<span :class="{'is_active':isTab1}"></span></p>
						<p class="col-sm-6" @click="changeTab(2)" style="border-right:0;">平台贡献<span :class="{'is_active':isTab2}"></span></p>
						<!--<p class="col-sm-4" style="border-right:0;" @click="changeTab(3)">
							账户信息
							<span :class="{'is_active':isTab3}"></span>
						</p>-->
					</div>
				</div>
				<div class="col-sm-12 per_left_con" v-if="hideAllInfo">
					<div class="col-sm-4">
						<h3 style="margin-bottom:6px;">{{userInfo.username}}</h3>
						<!--<p>Xtalpi</p>-->
						<p class="head_portrait">{{userInitials}}</p>
						<!--<img :src="userInfo.head" alt=""/>-->	
						<!--<div class="col-sm-12 operation">
							<div class="col-sm-6">
								<p>{{userInfo.follow}}</p>
								<p>关注</p>
								<button class="btn Invitation">邀请加入</button>
							</div>
							<div class="col-sm-6">
								<p>{{userInfo.followed}}</p>
								<p>粉丝</p>
								<button class="btn follow">关注</button>
							</div>
						</div>-->
						<p class="col-sm-12 text-left registration_time">
							<span>注册时间</span>
							<span style="margin-left:20px;">{{userInfo.register_time}}</span>
						</p>
						<!--<p class="col-sm-12 text-left in_the_time">
							<span>所在团队</span>
							<span style="margin-left:20px;">AtomPai</span>
						</p>-->
					</div>
					<!--右侧信息-->
					<div class="col-sm-8 personal_box_info">					
						<div class="personal_box" v-if="showInfoSpan"> 
							<div class="text-left">
								<span>用户名</span>						
						    	<span class="dis_info">{{userInfo.username}}</span>
							</div>
							<div class="text-left">
								<span>公&nbsp;&nbsp;&nbsp;司</span>
					    		<span class="dis_info">{{userInfo.organization}}</span>					
							</div>
							<div class="text-left">
								<span>职&nbsp;&nbsp;&nbsp;位</span>
					    		<span class="dis_info">{{userInfo.position}}</span>					
							</div>
							<div class="text-left">
								<span>手机号</span>
					    		<span class="dis_info">{{userInfo.phone}}</span>				
							</div>
							<div class="text-right">
								<button class="edit_info_btn btn" @click="editMyInfo()" 
									:disabled="this.$route.params.username!=username">编辑</button>
							</div>
						</div>
						<div class="personal_box" v-if="showInfoInput"> 
							<div class="text-left">
								<span class="">用户名</span>						
						    	<input type="text" class="" placeholder="用户名" v-model="userInfo.username">
							</div>
							<div class="text-left">
								<span>公&nbsp;&nbsp;&nbsp;司</span>
					    		<input type="text" class="" placeholder="填写公司" v-model="userInfo.organization">						
							</div>
							<div class="text-left">
								<span>职&nbsp;&nbsp;&nbsp;位</span>
					    		<input type="text" class="" placeholder="填写职位" v-model="userInfo.position">						
							</div>
							<div class="text-left">
								<span>手机号</span>
					    		<input type="number" class="" placeholder="填写手机号" v-model="userInfo.phone">						
							</div>
							<div class="text-right">
								<button class="edit_info_btn btn" @click="editPerCancel()">取消</button>
								<button class="edit_info_btn_save btn" @click="editPerSure()">保存</button>
							</div>
						</div>
					</div>
				</div>
				<!--平台贡献-->								
				<div class="platform col-sm-12" v-if="showHidePlat">						
					<div>
						<div class="col-sm-8 text-left">
							<label class="input_label_beautify" style="margin-bottom:10px;">				
						        <input class="input_radio" type="radio" name="per_checkbox" @click="showDiffTable(2)">
						        <span class="input_radioInput"></span>数据
							</label>
							<label class="input_label_beautify">				
						        <input class="input_radio" type="radio" name="per_checkbox" @click="showDiffTable(1)">
						        <span class="input_radioInput"></span>模型
							</label>
						</div>
					</div>
					<all-data v-show="onlyShowData" :owner="owner_val"></all-data>
					<model-template :owner="owner_val" v-show="onlyShowTem"></model-template>
				</div>
				<!--账户余额-->
				<div class="account_info col-sm-12" v-if="showHideAccount">
					<div>
						<p class="text-left">账户余额</p>
						<p>103pai</p>
						<p>立即充值</p>
					</div>
					<div class="heightLimited">					
						<table class="table table-striped table-hover table-bordered text-left" id="detail_table">
		                    <thead>
		                        <tr>
		                        	<th>交易流水号</th>
		                            <th>交易时间</th>
		                            <th>交易详情</th>
		                            <th>交易类型</th>
		                        </tr>
		                    </thead>
		                    <tbody id="editable_sample_tbody">
		                    	<tr>
		                    		<td>col_item.index</td>
		                    		<td>col_item.column_name</td>
		                    		<td>123</td>
		                    		<td>col_item.value</td>
		                    	</tr>
		                    </tbody>
		                </table>
					</div>
				</div>
			</div>
		</div>
		<footerHtml></footerHtml>
	</div>
</template>

<script>
	import headTop from '@/components/headTop'
	import footerHtml from '@/components/footerHtml'
	import allData from '@/components/allData'
	import allTemplates from '@/components/allTemplates'
	import allModel from '@/components/allModel'
	import pagination from '@/components/page'
	import modelTemplate from '@/components/model_template'
	
	import {urlGetUserInfo,urlEditUserInfo} from '../api/api'
	
	export default {
	    name: 'personalPage',   
	    data(){
	    	return {
	    		username:localStorage.getItem('username'),
	    		onlyShowData:true,
	    		onlyShowModel:false,
	    		onlyShowTem:false,
	    		hideAllInfo:true,
	    		showInfoSpan:true,
	    		showHidePlat:false,
	    		showHideAccount:false,
	    		showInfoInput:false,
	    		owner_val:0,
	    		tab_type:'',
	    		table_type:'',
	    		isTab1:true,
	    		isTab2:false,
	    		isTab3:false,
	    		userInitials:'',
	    		userInfo:{
			        username:'',
			        position:'',
			        phone:'',
			        organization:'',
			        head:'',
			        follow:'',
			        followed:'',
			        register_time:''
	    		}
	    	}	    	
	    },
	    components:{
			headTop,
			footerHtml,
			pagination,
			allData,
			allTemplates,
			allModel,
			modelTemplate
		},
	    mounted(){ 
	    	this.loadUserInfo()
	    },
	    methods:{
	    	loadUserInfo(){
	    		let sendData={
	    			username:this.$route.params.username
	    		};
	    		urlGetUserInfo(sendData).then(response => {
		  			if(response.data.code==200){	  				
		  				let resData=response.data.data;
		  				this.userInfo.username=resData.username;
		  				this.userInitials=this.userInfo.username.substr(0, 1);
		  				console.log(this.userInitials)
		  				this.userInfo.position =resData.position ;
		  				this.userInfo.phone =resData.phone ;
		  				this.userInfo.head=resData.head;
		  				this.userInfo.follow =resData.follow ;
		  				this.userInfo.followed=resData.followed;
		  				this.userInfo.organization=resData.organization;
		  				this.userInfo.register_time=resData.register_time;
		  			}				    		
		     	}).catch(error => {
		     		if(error.response.data.code==401){	
		     			localStorage.clear();
		        		this.$router.replace('/login');
					}
		      	}); 
	    	},
	    	editMyInfo(){
	    		this.showInfoInput=true;
	    		this.showInfoSpan=false;
	    	},
	    	editPerCancel(){
	    		this.showInfoInput=false;
	    		this.showInfoSpan=true;
	    	},
	    	editPerSure(){
	    		let sendData={
	    			username:this.userInfo.username,
			        position:this.userInfo.position,
			        phone:this.userInfo.phone,
			        organization:this.userInfo.organization
	    		};
	    		urlEditUserInfo(sendData).then(response => {
		  			if(response.data.code==200){	  				
		  				this.showInfoInput=false;
	    				this.loadUserInfo();
	    				this.showInfoSpan=true;
		  			}				    		
		     	}).catch(error => {
		     		if(error.response.data.code==401){	
		     			localStorage.clear();
		        		this.$router.replace('/login');
					}
		      	}); 
	    	},
	    	showDiffTable(table_type){
	    		//1是模板，2是数据，3是模型
	    		this.table_type=table_type;
	    		if(this.table_type==1){
	    			this.onlyShowTem=true;
	    			this.onlyShowData=false;
	    			this.onlyShowModel=false;
	    		}else if(this.table_type==2){
	    			this.onlyShowData=true;
	    			this.onlyShowModel=false;
	    			this.onlyShowTem=false;
	    		}else if(this.table_type==3){
	    			this.onlyShowModel=true;
	    			this.onlyShowData=false;
	    			this.onlyShowTem=false;
	    		}
	    		
	    	},	    	
	    	changeTab(tab_type){
	    		//1是个人信息，2是平台，3是账户
	    		this.tab_type=tab_type;
	    		if(this.tab_type==1){
	    			this.isTab1=true;
	    			this.isTab2=false;
	    			this.isTab3=false;
	    			this.hideAllInfo=true;
	    			this.showHidePlat=false;
	    		}else if(this.tab_type==2){
	    			this.isTab1=false;
	    			this.isTab2=true;
	    			this.isTab3=false;
	    			this.showHidePlat=true;
	    			this.hideAllInfo=false;
	    		}else if(this.tab_type==3){
	    			this.isTab1=false;
	    			this.isTab2=false;
	    			this.isTab3=true;
	    		}
	    	}
	    }
	}
</script>

<style>
	@import "../assets/css/personal.css"
</style>
<style>
	@import "../assets/css/sign.css"
</style>
